<template>
	<van-popup v-model:show="show" style="height: 100%;width: 100%;" position="right">
		<div class="page">
			<global-header :title="`${ragent?.Name}旗下详情`" @back="show = false">
			</global-header>
			<div>
				<van-search class="!flex-1" @search="search" @clear="load"
				:clearable="false" v-model="form.name" placeholder="请输入用户名/昵称/备注" shape="round" />
			</div>
			<div class="bg-white mt-[10px]">
				<div class="row-start-center text-[14px] text-[#888] pt-[12px] pb-[10px]  px-[15px]"
					style="border-bottom: 1px solid #E4E4E4;">
					<div class="w-[25%]">用户名</div>
					<div class="w-[20%]">昵称</div>
					<div class="w-[20%]">备注</div>
					<div class="w-[15%] text-center">旗下流水</div>
					<div class="w-[15%] text-center">总佣金</div>
					<div class="w-[15%] text-center">已返佣</div>
					<div class="w-[15%] text-center">未返佣</div>
					<div class="w-[15%] text-center">佣金流水</div>
				</div>
			</div>
			<div class="page-main overflow-y-auto" ref="scrollRef">
				<div class="bg-white ">

					<scroll-list v-model:loading="state.loading" v-model:refresh="state.refresh" :finished="state.finished"
						:length="list.length" @load="load">
						<template v-for="(item, index) in list">
							<div class="row-start-center text-[14px] text-[#444] pt-[12px] pb-[10px]  px-[15px]"
								style="border-bottom: 1px solid #E4E4E4;">
								<div class="w-[25%]">{{ item.Name }}</div>
								<div class="w-[20%]">{{ item.Nickname }}</div>
								<div class="w-[20%]">{{ item.Note }}</div>
								<div class="w-[15%] text-center">{{ item.BetAmount }}</div>
								<div class="w-[15%] text-center">{{ item.RebateAmount }}</div>
								<div class="w-[15%] text-center">{{ item.RebateAmountGot }}</div>
								<div class="w-[15%] text-center">{{ item.RebateAmountNo }}</div>
								<div class="w-[15%] text-center">{{ item.BackRate * 100 }}%</div>
							</div>
						</template>
					</scroll-list>
				</div>
			</div>
			<div class="page-main" ref="scrollRef"></div>
		</div>
	</van-popup>
</template>
<script setup lang="ts">
import { reqAgentRebateDetail } from '@/api/report';
import { useList } from '@/hooks/useList';
import moment from 'moment';

const show = ref(false)
interface TableItem {
	row: ReportAgentRebateDetailMo;
}
interface Params {
	AgentUserId: number;
	Name?: string;
	StartDate?: string;
	EndDate?: string;
}

const props = withDefaults(
	defineProps<{
		ragent: ReportAgentRebateMo;
		date?: Date[]
	}>(),
	{}
);
const form = reactive({
	name: ""
});


const getParams = () => {
	console.log(props.date);
	const params: Params = {
		AgentUserId: props.ragent.UserId as number
	};
	if (props.date) {
		params.StartDate = moment(props.date[0]).format("YYYY-MM-DD 00:00:00");
		params.EndDate = moment(props.date[1]).format("YYYY-MM-DD 23:59:59");
	}
	if (form.name) {
		params.Name = form.name;
	}
	return params;
};
const { state, list, getData, search, load, refresh } = useList<ReportAgentRebateDetailMo, Params>(
	reqAgentRebateDetail,
	getParams
);



const open = () => {
	show.value = true;

	getData()
}

defineExpose({
	open
});
</script>
<style lang="scss" scoped></style>
